<%@page import="com.ingenio.siot.adapter.RecorridoAdapter"%>
<%@page import="com.ingenio.siot.adapter.LineaAdapter"%>
<%@page import="com.ingenio.siot.entity.Punto"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<% 
		LineaAdapter la = new LineaAdapter();
		RecorridoAdapter ra = new RecorridoAdapter();
	%>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polilineas</title>
    <style>
    
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
      
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>

	var flightPath;
	var map;
	function initialize() {
	  	var mapOptions = {
	    	zoom: 10,
	    	center: new google.maps.LatLng(-32.954807, -60.647485),
	    	mapTypeId: google.maps.MapTypeId.ROADMAP
	  	};

  		map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
		

  		<%-- var a = <%// la.devolverLineasJSON()%>  --%>
  		var recorrido = <%= ra.devolverRecorridoJSON("TAXI254") %> 		
  		
			console.log(recorrido);
	  		recorrido.puntos.forEach(function(element, index, array){
	  		    var myLatlng = new google.maps.LatLng(element.lat, element.lng);
	  	  		var marker = new google.maps.Marker({
	  	  	      position: myLatlng,
	  	  	      map: map,
	  	  	      title: "Test"
	  	  	 	});
	  		});
  		/* a.lineas.forEach(function(element, index, array){

  		var a = <%=la.devolverLineasJSON()%> 
  		a.lineas.forEach(function(element, index, array){

  			
  			var ini = element.ptoIni;
  			var fin = element.ptoFin;
  			
  			var lineCoordinates = [
  			   new google.maps.LatLng(ini.lat, ini.lng),
  			   new google.maps.LatLng(fin.lat, fin.lng)
  			];
  			
  			line = new google.maps.Polyline({
  		      path: lineCoordinates,
  		      strokeColor: '#8F4297',
  		      strokeOpacity: 1.0,
  		      strokeWeight: 3
  		    });
  			addLine(); */


  		/* }); */
  		

  		/* }); */


	}

function addLine() {
  line.setMap(map);
}

function removeLine() {
  line.setMap(null);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
	<div id="panel">
    </div>
    <div id="map-canvas"></div>
</body>
</html>